<template>
	<view style="background-color: #fff;height: 100vh;">
		<Header title="益 答" background="#EBF0F7" color="#333" :back="true"></Header>
		<!-- <view style="height: 160rpx;background: #EBF0F7;color: #333;" class="bg-gradual-orange2">
			<view style="height: 160rpx;width: 100%;display: flex;">
				<view style="height: 60rpx;width: 100%; margin-top: 110rpx;font-size: 32rpx;display: flex;">
					<view style="width: 20%;text-align: center;line-height: 32rpx;" @click="back()">
						<text class="cuIcon-back" style="height: 60rpx;"></text>
						<text> 返回</text>
					</view>
					<view style="width: 56%;text-align: center;line-height: 32rpx;">
						<text>益 答</text>
					</view>
				</view>
			</view>
		</view> -->
		<view class="bgcolor">
			<!-- <view style="height: 100%;width: 100%;">
				<image style="height: 100%;width: 100%;" mode="aspectFill" :src="answer1"></image>
			</view> -->
			<view
				style="width: 100%;height: 1000rpx; position: absolute;padding: 30px;padding-bottom: 0;">
				<view class="radius text-white" style="height: 1000rpx;border-radius: 20rpx; display: flex;">	
					<!-- <view style="height: 1000rpx;width: 100%;">
						<image style="height: 1000rpx;width: 100%;" :src="answer3" mode="aspectFit"></image>
					</view> -->
					<!-- <template v-if="userInfo.phone"> -->
						<view style="position: absolute;top:505rpx;width: 76%;margin: 30rpx;" v-if="!resultSucess && !resultError && !resultSum">
							<view style="min-height: 180rpx;">
								<view class="text-black" style="height: 50rpx;align-items: center;justify-content: center;
											 display: flex;font-size: 36rpx;margin-top: 20rpx;">
									{{progress}}
								</view>
								<view class="padding-sm text-black"
									style="min-height: 110rpx;font-size: 32rpx;font-weight: 600;">
									{{question.questionTitle || ''}}
								</view>
							</view>
							<view style="min-height: 400rpx;" class="text-black">
								<view>
									<radio-group @click="radioClick(item.selectId)" v-for="(item, index) in question.selects" :key="index">
										<view class="margin-lg">
											<radio class="green" :value="item.selectId"></radio>
											<text class="margin-left-sm" style="font-size: 32rpx;">{{item.sort}}、{{item.selectContent}}</text>
										</view>
										<!-- <view class="margin-lg">
											<radio class="green" value="2"></radio>
											<text class="margin-left-sm" style="font-size: 32rpx;">{{item.optionB}}</text>
										</view>
										<view class="margin-lg" v-if="item.optionC">
											<radio class="green" value="3"></radio>
											<text class="margin-left-sm" style="font-size: 32rpx;">{{item.optionC}}</text>
										</view>
										<view class="margin-lg" v-if="item.optionD">
											<radio class="green" value="4"></radio>
											<text class="margin-left-sm" style="font-size: 32rpx;">{{item.optionD}}</text>
										</view> -->
									</radio-group>
								</view>
							</view>
						</view>
						
						<view v-if="resultSucess" style="height: 365rpx;padding: 40rpx;position: absolute;top:540rpx;width: 76%;margin: 30rpx;"
							class="text-black">
							<view style="height: 100rpx;">
								<view class='cu-tag line'
									style="height: 100rpx;font-size: 86rpx;align-items: center;justify-content: center;display: flex;">
									<text class='cuIcon-roundcheckfill text-green' style="align-items: baseline;"></text>
								</view>
							</view>
							<view
								style="height: 80rpx;font-size:46rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;"
								class="text-green">
								恭喜您，答对了
							</view>
							<view
								style="height: 80rpx;font-size:32rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;">
								为你配捐公益爱心积分：
							</view>
							<view style="height: 80rpx;margin-left: 200rpx;font-size: 32rpx;">
								<view class='cu-tag line' style="height: 80rpx;font-size: 60rpx;border-radius: ;">
									<text class='cuIcon-likefill text-orange' style="align-items: baseline;"></text>
								</view>{{scoreValue}}
							</view>
							<view style="margin-top: 100rpx;display: flex;align-items: center;justify-content: center;">
								<button class="cu-btn round line-green shadow" @click="nextQuestion()">
									下一题
								</button>
							</view>
						</view>
						<view v-if="resultError" style="height: 365rpx;padding: 40rpx;position: absolute;top:540rpx;width: 76%;margin: 30rpx;"
							class="text-black">
							<view style="height: 100rpx;width: 100%;">
								<view class='cu-tag line'
									style="height: 100rpx;font-size: 86rpx;align-items: center;justify-content: center;display: flex;">
									<text class='cuIcon-roundclose text-orange' style="align-items: baseline;"></text>
								</view>
							</view>
							<view
								style="height: 80rpx;font-size:46rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;"
								class="text-orange">
								很遗憾，答错了
							</view>
							<view
								style="height: 80rpx;font-size:32rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;">
								为你配捐公益爱心积分：
							</view>
							<view style="height: 80rpx;margin-left: 200rpx;font-size: 32rpx;">
								<view class='cu-tag line' style="height: 80rpx;font-size: 60rpx;border-radius: ;">
									<text class='cuIcon-likefill text-orange' style="align-items: baseline;"></text>
								</view>{{scoreValue}}
							</view>
							<view style="margin-top: 100rpx;display: flex;align-items: center;justify-content: center;">
								<button class="cu-btn round line-orange shadow" @click="nextQuestion()">
									下一题
								</button>
							</view>
						</view>
						<view v-if="resultSum" style="height: 365rpx;padding: 0 40rpx;position: absolute;top:540rpx;width: 76%;margin: 30rpx;"
						class="text-black">
							<view style="height: 100rpx;">
								<view class='cu-tag line'
									style="height: 100rpx;font-size: 86rpx;align-items: center;justify-content: center;display: flex;">
									<text class='cuIcon-roundcheckfill text-green' style="align-items: baseline;"></text>
								</view>
							</view>
							<view
								style="height: 80rpx;font-size:46rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;"
								class="text-green">
								恭喜你
							</view>
							<view
								style="height: 80rpx;font-size:36rpx;font-weight: 600;display: flex;align-items: center;justify-content: center;margin-top: 80rpx;"
								>
								<!-- 今天共获得{{scoreValueSum}}公益积分 -->
								<!-- {{scoreValueSum}} -->
								<rich-text class="content" id="richId" :nodes="scoreValueSum"></rich-text>
							</view>
							<!-- <view style="font-size: 27rpx;">
								<view style="text-align: center;">小善大爱，点滴汇聚爱心，累计100积分可以为边远山区儿童奉献一份热腾腾的免费午餐</view>
							</view>
							<view style="font-size: 27rpx;">
								<view style="text-align: center;">5份免费午餐（周午餐）即可获得中国社会福利基金会联合颁发的国家级荣誉证书和社会公益实践证明</view>
							</view>
							<view style="font-size: 27rpx;">
								<view style="text-align: center;">（想要获得更多积分，为公益助力，可联系爱心志愿者）</view>
							</view> -->
						</view>
					<!-- </template> -->
					<!-- <view class="login" v-else>
						<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="login-btn" v-if="userInfo.userId">开始答题</button>
						<button class="login-btn" @click="login" v-else>登录</button>
					</view> -->
					<view style="position: absolute;top: 1400rpx;width: 88%;text-align: center;font-size: 30rpx;">
						规则：每星期可进行公益答题4次，每次8道题
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Header from '@/pages/components/header.vue'
	import {
		getQuestionList,
		getQuestionDetail,
		addQuestionDetail
	} from '@/api/question.js'

	import {
		getUserProfile,
		updateScoreValue,
		relogin
	} from '@/utils/getUserProfile.js'
	
	import {
		getUserInfo,
		getPhone
	} from '@/api/user.js'

	export default {
		components: {
			Header
		},
		data() {
			return {
				answer1: 'http://source.zywm.softwarechina.cn/upload/image/2022/06-09/711f47e34af768c81020978e1a3fb9eb.png',
				answer2: 'https://nottomention.emake.cn/group1/M00/00/00/answer2.png',
				answer3: require('../../static/answer3.png'),
				dotStyle: true,
				questionList: [],
				nextQ: 0,
				selectOption: '',
				resultSucess: false, // 回答成功
				resultError: false, // 回答失败
				scoreValue: 0,
				questionIndex: 0,
				resultSum: false,
				questionDetailCnt: 0,
				scoreValueSum: 0,
				question: {}, // 题目
				progress: '', // 1/20
				nowNum: 1, // 当前题数
				userInfo: {}
			}
		},
		async onShow(item) {			
			this.resultSucess = false;
			this.resultError = false;
			this.resultSum = false;
			this.scoreValueSum = 0;
			this.nextQ = 0;
			var token = uni.getStorageSync("token");
			if (!token) {
				await this.getUserProfile();
			} else {
				await this.getUserInfo();
			}
			token = uni.getStorageSync("token");
			if (token) {
				await this.getQuestionDetail();
			}
		},
		onLoad() {

		},
		mounted() {
			// uni.showLoading({
			// 	title: '加载中...',
			// 	mask: true
			// });
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			/**返回*/
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			/**授权登录*/
			// async getUserProfile() {
			// 	let data = await getUserProfile();
			// 	if (data.code != 200) {
			// 		uni.showToast({
			// 			title: '登录失败！',
			// 			duration: 1000,
			// 			icon: 'none',
			// 		});
			// 		uni.navigateBack({
			// 			delta: 1,
			// 		})
			// 	} else {
			// 		uni.showToast({
			// 			title: '登录成功！',
			// 			duration: 1000,
			// 			icon: 'none',
			// 		});
			// 	}
			// },
			// 登录
			async login() {
				var token = uni.getStorageSync("token");
				if (!token) {
					await this.getUserProfile();
				} else {
					await this.getUserInfo();
				}
				token = uni.getStorageSync("token");
				if (token) {
					await this.getQuestionDetail();
				}
			},
			async getUserProfile() {
				let data = await getUserProfile();
				if (data.code != 200) {
					uni.showToast({
						title: '登录失败！',
						duration: 1000,
						icon: 'none',
					});
				} else {
					uni.showToast({
						title: '登录成功！',
						duration: 1000,
						icon: 'none',
					});
					this.getUserInfo();
				}
			},
			/**获取用户信息*/
			async getUserInfo() {
				let token = uni.getStorageSync("token");
				const {
					data
				} = await getUserInfo(token);
				this.userInfo = data;

			},
			/**获取问题*/
			async getQuestionList(userId) {
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				});
				getQuestionList({
					userId: userId
				}).then(res => {
					if (res.code == 200) {
						this.questionList = res.data;
						uni.hideLoading();
					} else {
						uni.showToast({
							title: '获取数据失败！',
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
			// 获取手机号码
			async getPhoneNumber(e){				
				if (e.detail.errMsg == "getPhoneNumber:ok") {					
					var query = {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						sessionKey: uni.getStorageSync("sessionKey") || ''
					}
					await getPhone(query).then(async (data) => {
						if (data.code === 200) {
							this.userInfo.phone = data.data.phone
						} else if (data.code === 500) { // sessionKey 失效
							// 重新登录
							const result = await relogin()
							if (result.code === 200) {
								query.sessionKey = uni.getStorageSync("sessionKey") || ''
								await getPhone(query).then(data => {
									if (data.code === 200) {
										this.userInfo.phone = data.data.phone
									} else {
										uni.showToast({
											title: '授权失败！',
											duration: 1000,
											icon: 'none',
										});
									}
								})
							}
						} else {
							uni.showToast({
								title: '授权失败！',
								duration: 1000,
								icon: 'none',
							});
						}
					})
				} else {
					console.log("用户点击了拒绝")
				}
			},
			radioChange(e) {
				this.selectOption = e.detail.value
			},
			/**点击事件*/
			async radioClick(id) {
				let token = uni.getStorageSync("token");
				if (!token) {
					let data = await getUserProfile();
					if (data.code != 200) {
						uni.showToast({
							title: '登录失败！',
							duration: 1000,
							icon: 'none',
						});
						return;
					}
				}
				// this.questionIndex = index;
				// if (item.answer == this.selectOption) {
				// 	this.resultSucess = true;
				// 	this.nextQ = 6;
				// 	this.scoreValue = item.scoreValue
				// } else {
				// 	this.resultError = true;
				// 	this.nextQ = 6;
				// 	this.scoreValue = 1;
				// }
				const query = {
					questionId: this.question.questionId,
					answer: id
				}
				addQuestionDetail(query).then(res => {
					console.log(res);
					if (res.code == 200) {
						if (res.data.isRight == 1) {
							this.resultSucess = true;
						} else {
							this.resultError = true;
						}
						this.scoreValue = res.data.credit
					} else {
						uni.showToast({
							title: '答题失败！',
							duration: 1000,
							icon: 'none',
						});
					}
				});

			},
			/**下一题*/
			nextQuestion() {
				this.resultSucess = false;
				this.resultError = false;
				this.getQuestionDetail()
			},
			/**获取问题明细*/
			async getQuestionDetail() {
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				});
				getQuestionDetail({
				}).then(res => {
					if (res.code == 200) {
						const data = res.data
						this.question = data.question;
						this.progress = data.process
						const [nowNum] = data.process.split('/')
						this.nowNum = nowNum
						// this.questionDetailCnt = resultArray.length;
						// if (this.questionDetailCnt == 3) {
						// 	this.resultSum = true;
						// 	this.nextQ = 6;
						// 	resultArray.forEach((item) => {
						// 		this.scoreValueSum += item.scoreValue
						// 	});
						// } else {
						// 	this.getQuestionList(userId);
						// }
						uni.hideLoading();
					} else if (res.code == 500) {
						this.resultSum = true
						this.scoreValueSum = res.msg
						uni.hideLoading();
					} else {
						uni.showToast({
							title: '获取数据失败！',
							duration: 1000,
							icon: 'none',
						});
					}
				})
			},
		}
	}
</script>

<style scoped>
	.answer2 {
		background: url("https://nottomention.emake.cn/group1/M00/00/00/answer2.png");
	}
	.bgcolor{
		display: flex;
		height: 100vh;
		/* background: url("http://source.zywm.softwarechina.cn/upload/image/2022/06-09/711f47e34af768c81020978e1a3fb9eb.png") no-repeat; */
		background: url("https://source.zytx.site/upload/images/dati.png") no-repeat;
		background-size: cover;
	}
	.margin-lg {
		margin: 26upx 40upx;
	}
	.login{
		width: 100%;
		display: flex;
		justify-content: center;
		position: absolute;
		top:785rpx;
		width: 76%;
		margin: 30rpx;
	}
	.login .login-btn{
		background: #339BD4;
		width: 240rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
	}
</style>
